<template>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="tabs-one">
          <PartitionTitle type='line' title='常规任务'></PartitionTitle>
          <span class='total-fz'>{{allTotal}}</span>
        </div>

        <div class="more">
          <el-link type="warning" :underline="false" @click.stop="lookMore">更多
            <img src="@/assets/images/workbench/arr-right.png"/>
          </el-link>
        </div>
      </div>

      <div class='el-tabs'>
        <el-link
          class="item"
          :class="(item.name == 2 || item.name == 3) ? 'item-arr' : ''"
          :underline="false"
          v-for="(item,index) in taskList"
          :key='item.name'
          @click="toDetail(item)"
        >
          <img :src="item.path">
          <span class="name">{{item.label}}</span>
          <span class='total-fz' :style="{color:nomalTotal[index] ? item.color : '#606266'}">{{nomalTotal[index]}}</span>
        </el-link>
      </div>

      <nomal-task-dialog
        :userInfo="userInfo"
        :visible.sync="nomalData.visible"
        :tabName="nomalData.tabName"
        :nomalTotal="nomalTotal"
        @updateTotal="updateTotal"
      />
    </el-card>
</template>
<script>
  import nomalTaskDialog from "./nomalTaskDialog"
  import { getTaskCenterList } from "@/api/taskMgmt/center";
  import { mapState,mapActions,mapGetters} from "vuex";
export default {
  props:{
    userInfo:{
      type:Object,
      default:()=>{}
    }
  },
  data() {
    return {
      taskList:[
        {label:"待处理",name:"1",path:require("@/assets/images/workbench/todo.png"),color:"#FF9300"},
        {label:"待审核",name:"2",path:require("@/assets/images/workbench/doing.png"),color:"#2F83FF"},
        {label:"已超时 ",name:"3",path:require("@/assets/images/workbench/warning.png"),color:"#F54E1E"}
      ],
      activeTab:"1",
      loading: false,
      pager: {
        pageNum: 1,
        pageSize: 10
      },

      nomalData:{
        tabName:null,
        visible:false
      },
      nomalTotal:[0,0,0],
      refreshTimer:null
    };
  },

  computed: {
    ...mapGetters([
      'treePermitList'
    ]),

    allTotal(){
      let num = 0;
      this.nomalTotal.forEach(ele => {
        num += ele
      })
      return num
    }
  },

  created(){
    this.getNomalTaskList("0,2,5")
    this.getNomalTaskList("1")
    this.getNomalTaskList("3")
    setTimeout(() => {
      this.setRefreshTimer()
    }, 1000);
  },

  methods:{
    //获取常规任务
    setRefreshTimer(){
      if (this.refreshTimer) {
        clearTimeout(this.refreshTimer);
      }
      this.refreshTimer = setTimeout(() => {
        this.getNomalTaskList("0,2,5")
        this.getNomalTaskList("1")
        this.getNomalTaskList("3")
        this.setRefreshTimer();
      },60000)
    },
    getNomalTaskList(status) {
      this.loading = true;
      const { pageNum, pageSize } = this.pager;
      let query = {
        ownedFactory: null,
        ownedWorkshop: null,
        ownedProductionLine:null,
        queryType:"person"
      }
      if(status == "0,2,5"){
        query = Object.assign(query,{statusList:status.split(",")})
      }
      else{
        query = Object.assign(query,{status:status})
      }
      const params = {
        query: query,
        pageNum,
        pageSize,
      };
      getTaskCenterList(params)
        .then((res) => {
          if(status == "0,2,5"){
            this.$set(this.nomalTotal,0,res?.total || 0)
          }
          else if(status == "1"){
            this.$set(this.nomalTotal,1,res?.total || 0)
          }
          else if(status == "3"){
            this.$set(this.nomalTotal,2,res?.total || 0)
          }
          this.loading = false;
        })
        .catch(() => {
          if(status == "0,2,5"){
            this.$set(this.nomalTotal,0,0)
          }
          else if(status == "1"){
            this.$set(this.nomalTotal,1, 0)
          }
          else if(status == "3"){
            this.$set(this.nomalTotal,2,0)
          }
          this.loading = false;
        });
    },

    //子页面操作需要更新整个数据统计
    updateTotal(val){
      if(val == 1){//待处理
        this.getNomalTaskList("0,2,5")
      }
      else if(val == 2){//待审核
        this.getNomalTaskList("1")
      }
      else if(val == 3){//今日超时
        this.getNomalTaskList("3")
      }
    },

    toDetail(item){
      this.nomalData.visible = true;
      this.nomalData.tabName = item.name
    },

    lookMore(){
      this.$router.push({ path: "../taskMgmt/center"}).catch(()=>{});
    }
  },

  beforeDestroy(){
    if (this.refreshTimer) {
      clearTimeout(this.refreshTimer);
    }
  },
  destroyed(){
    if (this.refreshTimer) {
      clearTimeout(this.refreshTimer);
    }
  },
  components:{
    nomalTaskDialog
  }
};
</script>
<style lang="scss" scoped>
.box-card{
  width: 100%;
  .clearfix{
    display:flex;
    align-items: center;
    color: #313131;
    .tabs-one{
      display:flex;
      align-items: center;
      span{
        color: #313131;
      }
      .active{
        color:#34855B;
        font-weight: bold;
      }
    }
    ::v-deep.block-title{
      margin-bottom: 0;
      .title.line{
        color: #313131;
        min-width:auto;
        padding-right:0.5rem;
      }
      .title::before{
        background:#34855B;
      }
    }
    .more{
      font-size:14px;
      flex:1;
      text-align: right;
      .el-link.el-link--warning{
        color:#34855B;
        ::v-deep.el-link--inner{
          display:flex;
          align-items: center;
        }
        img{
          width: 16px;
          height: 16px;
        }
      }
    }
  }
  ::v-deep.el-tabs{
    display: flex;
    align-items: center;
    .item {
      .el-link--inner{
        width:120px;
        display: flex;
        align-items: flex-end;
        justify-content:flex-start;
        img{
          width: 18px;
          height: 18px;
        }
        .name{
          padding:0 6px
        }
      }
    }
    .item-arr{
      width:160px;
      display: flex;
      justify-content:flex-start;
    }
    .item:not(:last-child){
      // margin-right:20px;
    }
    .el-tabs__content{
      margin: 0 0 0.9375rem;
    }
  }
  .total-fz{
    font-size:16px;
  }
}

</style>
